<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>权限角色</title>
  <link rel="stylesheet" href="../../js/jiang_xue_jiao/bootstrap-3.3.5-dist/css/bootstrap.css">
  <style>
    * {
      padding: 0;
      margin: 0;
      /* outline: solid red; */
    }

    .all {
      width: 100%;
    }

    .text {
      font-size: 16px;
      width: 94%;
      padding: 15px 0px;
      margin-left: 3%;
      border-bottom: 1px solid rgb(207, 207, 207);
    }

    .add {
      margin-top: 15px;
      margin-left: 5%;
      width: 90%;
    }

    .btn-primary {
      background-color: #108ee9;
      border-color: #108ee9;
    }

    table {
      margin-top: 15px;
      margin-left: 5%;
      width: 70%;
      border-color: #F4F4F4;
      text-align: center;

    }

    th {
      height: 50px;
      line-height: 50px;
      text-align: center;
      background-color: #F4F4F4;
      font-size: 14px;
    }

    #myTbody {
      height: 40px;
      line-height: 40px;
      font-size: 12px;
    }

    a {
      text-decoration: none;
      cursor: pointer;
      margin-left: 10px;
      color: #108ee9;
    }

    .footer {
      display: flex;
      justify-content: center;
      margin: 30px auto;
    }

    .pre,
    .next,
    .myPage div {
      width: 30px;
      height: 30px;
      line-height: 30px;
      text-align: center;
      border: 1px solid #cfcccc;
      border-radius: 2px;
      margin-left: 8px;
      font-size: 12px;
      cursor: pointer;
    }

    .active_page {
      background-color: #108ee9;
      color: #fff;
    }

    .myPage {
      display: flex;
    }

    #update_div {
      width: 400px;
      height: 300px;
      display: none;
      position: absolute;
      background-color: #ffffff;
      border: 1px solid #cfcccc;
      border-radius: 3px;
      left: 35%;
      top: 15%;
      text-align: center;
    }

    p {
      margin-top: 10%;
    }

    #update_div div {
      margin-top: 20px;
    }

    #u_sure {
      margin-top: 10px;
      border: #108ee9;
      border-radius: 5px;
      background-color: #108ee9;
      color: #fff;
      width: 90px;
      height: 30px;
      line-height: 30px;
      text-align: center;
      margin-right: 40px;
    }

    #u_cancel {
      margin-top: 10px;
      border: #d7d7d7;
      border-radius: 5px;
      background-color: #d7d7d7;
      color: rgb(103, 101, 101);
      width: 90px;
      height: 30px;
      line-height: 30px;
      text-align: center;
    }

    #myTbody button {
      border: none;
      background-color: #fff;
      color: #108ee9;
      margin-left: 10px;
    }
  </style>

</head>

<body>
  <div class="all">
    <div class="text">角色列表</div>
    <!-- 添加角色按钮  & 模态框-->
    <div class="add">
      <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#addDiv"
        data-whatever="@mdo">添加角色</button>

      <div class="modal fade" id="addDiv" tabindex="-1">
        <div class="modal-dialog">
          <div class="modal-content">
            <div class="modal-header">
              <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                  aria-hidden="true">&times;</span></button>
              <h4 class="modal-title" id="exampleModalLabel">添加角色</h4>
            </div>
            <div class="modal-body">
              <form>
                <div class="form-group">
                  <label for="recipient-name">*角色名: </label>
                  <input type="text" id="add_jueSeName" placeholder="请输入角色名">
                </div>
                <div class="form-group">
                  <label for="recipient-name">*账户名: </label>
                  <input type="text" id="add_user" placeholder="请输入账号名">
                </div>
                <div class="form-group">
                  <label for="recipient-name">*账户密码:</label>
                  <input type="password" id="add_pwd" placeholder="请输入账户密码">
                </div>
              </form>
            </div>
            <div class="modal-footer">
              <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
              <button type="button" class="btn btn-primary" id="sureAdd">添加</button>
            </div>
          </div>
        </div>
      </div>

    </div>

    <!-- 修改账户 弹框 -->
    <div id="update_div">
      <p>修改账户</p>
      <div>
        <span>角名:</span>
        <input id="u_jueSeName" type="text">
      </div>
      <div>
        <span>账户:</span>
        <input id="u_user" type="text">
      </div>
      <div>
        <span>密码:</span>
        <input id="u_pwd" type="text">
      </div>
      <div>
        <button id="u_sure">确定</button>
        <button id="u_cancel">取消</button>
      </div>
    </div>
    <!-- 表格 -->
    <table border="1">
      <thead>
        <tr>
          <th>角色名</th>
          <th>账户名</th>
          <th>账户密码</th>
          <th>创建时间</th>
          <th>操作</th>
        </tr>
      </thead>
      <tbody id="myTbody"></tbody>
    </table>
    <div class="footer">
      <div class="pre">&lt;</div>
      <div class="myPage">
      </div>
      <div class="next">&gt;</div>
    </div>
  </div>

  <script src="../../js/jiang_xue_jiao/jquery-1.11.3.js"></script>
  <script src="../../js/jiang_xue_jiao/bootstrap-3.3.5-dist/js/bootstrap.min.js"></script>
  <script>
    // 将数据放置到浏览器，使用localStorage.setItem
    let arr = JSON.parse(localStorage.getItem('power_data'))
    let dangqianye = 1
    let index = 0
    let id = 1
    let time = new Date()
    let y = time.getFullYear()
    let m = time.getMonth() + 1
    let d = time.getDay()
    let mi = time.getMinutes()
    let h = time.getHours()
    // 函数调用
    showTable(arr)
    showPage(arr)
    showData(arr, dangqianye)


    // 1-1.渲染tbody
    function showTable(data) {
      $("#myTbody").html('')
      for (let i = 0; i < data.length; i++) {
        $('#myTbody').append(`<tr>
          <td>${data[i].jueSeName}</td>
          <td>${data[i].user}</td>
          <td>${data[i].pwd}</td>
          <td>${data[i].time}</td>
          <td>
            <button class="set" index="${data[i]}">设置权限</button>
            <button class="update" index="${data[i].id}">修改账户</button>
            <button index="${data[i]}">禁用/启用</button>
            <button class="del" index="${data[i].id}">删除</button>
            </td>
         </tr>`)
      }
    }

    // 1-2渲染数据，每页4条数据,给当前页加上active_page类名
    function showData(data, pageNum) {
      let qishi = (pageNum - 1) * 4
      dangqianyeData = data.slice(qishi, qishi + 4)
      showTable(dangqianyeData)
      $(".page").eq(pageNum - 1).addClass('active_page').siblings().removeClass('active_page')
      dangqianye = pageNum
    }

    // 1-3渲染页码，为每一页加上page类名
    function showPage(data) {
      $(".myPage").html('') //清空页码
      maxPage = Math.ceil(data.length / 4)
      // 避免当页删除数据后，只剩下一个表头
      if (dangqianye > maxPage) {
        dangqianye = maxPage
      }
      for (let i = 1; i <= maxPage; i++) {
        $(".myPage").append(`<div class="page">${i}</div>`)
      }
    }

    // 1-4 page的事件委派,点击页码显示对应的数据
    $(".myPage").on('click', '.page', function () {
      showData(arr, parseInt($(this).text()))
    })

    // 1-5点击上一页函数
    $(".pre").click(function () {
      if (dangqianye > 1) {
        let shangyiye = dangqianye - 1
        showData(arr, shangyiye)
      }
    })

    // 1-6点击下一页函数
    $(".next").click(function () {
      if (dangqianye < maxPage) {
        let xiayiye = dangqianye + 1
        showData(arr, xiayiye)
      }
    })

    // 2.添加角色按钮函数
    $("#sureAdd").on('click', function () {
      // 2-1拿到模态框的值
      let add_jueSeName = $("#add_jueSeName").val()
      let add_user = $("#add_user").val()
      let add_pwd = $("#add_pwd").val()
      let add_time = `${y}.${m}.${d} ${h}:${mi}`
      // console.log(add_jueSeName, add_user, add_pwd);
      // 2-2判断添加信息需要输入完整
      if (add_jueSeName == '' || add_user == '' || add_pwd == '') {
        alert('信息输入不完整，请填写完整后添加')
        return false
      }
      // 将输入的信息变成对象添加到数组中
      let addObj = {}
      addObj.id = arr[arr.length - 1].id + 1 //加id因为添加删除时需要
      addObj.jueSeName = add_jueSeName
      addObj.user = add_user
      addObj.pwd = add_pwd
      addObj.time = add_time
      console.log(addObj);
      arr.push(addObj)
      localStorage.setItem('power_data', JSON.stringify(arr))
      showPage(arr)
      showData(arr, dangqianye)
      $("#addDiv").modal('hide')
      // 添加后清空输入框的值
      $("#add_jueSeName").val('')
      $("#add_user").val('')
      $("#add_pwd").val('')
    })

    // 3.设置权限跳转页面，事件委派
    $("#myTbody").on('click', '.set', function () {
      location.href = './set_power.html'
    })

    // 4.修改账户函数,事件委派
    $("#myTbody").on('click', '.update', function () {
      console.log('修改')
      $("#update_div").css('display', 'block')
      // 4-1获取表单原有的值
      let jueSeName = $(this).parents('tr').children().eq(0).text()
      let user = $(this).parents('tr').children().eq(1).text()
      let pwd = $(this).parents('tr').children().eq(2).text()
      console.log(jueSeName, user, pwd);
      // 4.2将获取到的原本的值通过一个对象接收，放入模态框的表单中，初始化模态框
      let obj = {}
      obj.jueSeName = jueSeName
      obj.user = user
      obj.pwd = pwd
      console.log(arr)
      index = arr.findIndex((item) => {
        //findIndex函数作用：根据对象的属性值，返回对象在数组中的下标
        return item.id == Number($(this).attr('index'))
        //attr()返回被选元素的属性值
        //$(this).attr('index') 获取当前点击修改按钮上的index属性的值
      })
      id = Number($(this).attr('index'))
      console.log(index)
      console.log(id)
      $("#u_jueSeName").val(obj.jueSeName)
      $("#u_user").val(obj.user)
      $("#u_pwd").val(obj.pwd)
    })

    // 4-3点击确定修改按钮，获取输入框修改内容时的值
    $("#u_sure").on('click', function () {
      let u_jueSeName = $("#u_jueSeName").val()
      let u_user = $("#u_user").val()
      let u_pwd = $("#u_pwd").val()
      let u_time = `${y}.${m}.${d} ${h}:${mi}`
      // console.log(u_jueSeName, u_user, u_pwd);
      let u_obj = {}
      u_obj.id = id
      u_obj.jueSeName = u_jueSeName
      u_obj.user = u_user
      u_obj.pwd = u_pwd
      u_obj.time = u_time
      console.log(index)
      arr[index] = u_obj // 将修改对象对应的值替换数组中对应的对象的值
      localStorage.setItem('power_data', JSON.stringify(arr))
      showPage(arr)
      showData(arr, dangqianye)
      $("#update_div").css('display', 'none')
    })

    // 4-4点击取消修改按钮，弹框隐藏
    $("#u_cancel").on('click', function () {
      $("#update_div").css('display', 'none')
    })

    // 5.删除角色按钮函数
    $("#myTbody").on('click', '.del', function () {
      let flag = confirm('确认删除吗？')
      if (flag) {
        // console.log(this.parentNode.parentNode);
        this.parentNode.parentNode.remove()
        let index = arr.findIndex((item) => {
          //findIndex函数作用：根据对象的属性值，返回对象在数组中的下标
          return item.id === Number($(this).attr('index'))
        })
        arr.splice(parseInt(index), 1)
        // 将删除后的数据设置到了localStorage.setItem
        localStorage.setItem('power_data', JSON.stringify(arr))
      }
      showPage(arr)
      showData(arr, dangqianye)
    })
  </script>

</body>

</html>